<template>
    <div>
        <div class="index-header">
            <win-button></win-button>
            <a class="index-header-logo">
                <img src="~@/assets/logo.png" alt="electron-vue"/>
            </a>
            <Menu class="index-header-menu" mode="horizontal" :active-name="activeMenuName">
                <MenuItem name="blog" to="/index/blog/article">
                    博客
                </MenuItem>
                <MenuItem name="system" to="/index/system/user">
                    系统
                </MenuItem>
            </Menu>
            <div class="index-header-user">
                <ButtonGroup>
                    <Badge :count="100" overflow-count="9">
                        <Button icon="md-notifications"></Button>
                    </Badge>
                </ButtonGroup>
                <Dropdown @on-click="clickUserMenu">
                    <Button type="text">
                        <Avatar size="small" shape="square" icon="ios-person"/>
                        {{username}}
                        <Icon type="ios-arrow-down"></Icon>
                    </Button>
                    <DropdownMenu slot="list">
                        <DropdownItem name="userInfo">个人中心</DropdownItem>
                        <DropdownItem divided name="lock">锁定</DropdownItem>
                        <DropdownItem name="cancel">注销</DropdownItem>
                        <DropdownItem name="logout">退出</DropdownItem>
                    </DropdownMenu>
                </Dropdown>
            </div>
        </div>
        <router-view></router-view>
    </div>
</template>
<script>

    const {ipcRenderer} = require('electron')
    import MenuUtil from "@/util/MenuUtil"

    import Platform from "./System"
    import WinButton from "./Common/WinButton"

    export default {
        name: "Index",
        components: {Platform, WinButton},
        data() {
            return {
                username: "",
                logoPath: "~@/assets/logo.png",
                activeMenuName: ""
            }
        },
        methods: {
            minWindow() {
                ipcRenderer.send('min-mainWindow', "min-mainWindow")
            },
            closeWindow() {
                ipcRenderer.send('close-mainWindow', "close-mainWindow")
            },
            getInitData() {
                this.$http({
                    method: 'get',
                    url: this.apiBase + '/blog/logout',
                    data: {}
                })
                    .then(response => {
                        this.checkLogin(response)
                    })
                    .catch(function (error) {
                        console.log(error);
                    })
            },
            clickUserMenu(name) {
                if (name == "logout") {
                    this.$http({
                        method: 'get',
                        url: this.apiBase + '/blog/logout',
                        data: {}
                    })
                        .then(response => {
                            if (response.data.code == 200) {
                                ipcRenderer.send('to-loginWindow', "to-loginWindow")
                            }
                        })
                        .catch(error => {
                            console.log(error);
                        })
                }
                if (name == "cancel") {
                    this.$http({
                        method: 'get',
                        url: this.apiBase + '/blog/logout',
                        data: {}
                    })
                        .then(response => {
                            if (response.data.code == 200) {
                                // ipcRenderer.send('to-loginWindow', "to-loginWindow")
                            }
                        })
                        .catch(error => {
                            console.log(error);
                        })
                }
                if (name == "userInfo") {
                    ipcRenderer.send('to-createCommonWindow', "to-createCommonWindow")
                }
            },
            getLoginUser(response) {
                this.$http({
                    method: 'get',
                    url: this.apiBase + '/blog/login/user',
                    data: {}
                })
                    .then(response => {
                        if (response.data.code == 200) {
                            this.username = response.data.data.loginUser.username;
                        }
                        if (response.data.code == 401) {
                            ipcRenderer.send('to-loginWindow', "to-loginWindow")
                        }
                    })
                    .catch(error => {
                        if (error.STATUS_CODES == undefined) {
                            ipcRenderer.send('to-loginWindow', "to-loginWindow")
                        }
                        console.log(error);
                    })
            }
        },
        created() {
            this.getLoginUser();
            this.activeMenuName = MenuUtil.activeMenu(location.href, 2)
        }
    };
</script>
<style scoped>
    .index-header {
        position: relative;
        border-bottom: #cccccc solid 1px;
        height: 80px;
    }

    .index-header-logo {
        position: absolute;
        top: 20px;
        left: 20px;
    }

    .index-header-logo img {
        height: 60px;
    }

    .index-header-menu {
        position: absolute;
        top: 20px;
        left: 300px;
    }

    .index-header-menu > .ivu-menu-item {
        font-size: 21px;
        font-family: "楷体";
    }

    .index-header-user {
        position: absolute;
        top: 30px;
        right: 10px;
    }


</style>
